<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
		<script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
		<link rel="stylesheet" href="../js/easyui/themes/icon.css" />
		<link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css" />
	</head>
	<script type="text/javascript">
		//页面加载后执行
		$(function() {
			$('#dg').datagrid({
				toolbar: [{
					iconCls: 'icon-edit',
					handler: function() { alert('编辑按钮') }
				}, '-', {
					iconCls: 'icon-help',
					handler: function() { alert('帮助按钮') }
				}]
			});

			$('#dg').datagrid({
				striped:true,
				pageList:[10,20,30,40,50],
				pagination:true,
				url: 'product.json',
				columns: [
					[
						{ field: 'id', title: '代码', width: 100 },
						{ field: 'name', title: '名称', width: 100 },
						{ field: 'price', title: '价格', width: 100, align: 'right' }
					]
				]
			});

		});
	</script>

	<body>
		<table class="easyui-datagrid">
			<thead>
				<tr>
					<th data-options="field:'code'">编码</th>
					<th data-options="field:'name'">名称</th>
					<th data-options="field:'price'">价格</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>001</td>
					<td>名称1</td>
					<td>2323</td>
				</tr>
				<tr>
					<td>002</td>
					<td>名称2</td>
					<td>4612</td>
				</tr>
			</tbody>
		</table>
		<hr />

		<table class="easyui-datagrid" style="width:400px;height:250px" data-options="url:'product.json',fitColumns:true,singleSelect:true">
			<thead>
				<tr>
					<th data-options="field:'id',width:100">编码</th>
					<th data-options="field:'name',width:100">名称</th>
					<th data-options="field:'price',width:100,align:'right'">价格</th>
				</tr>
			</thead>
		</table>
		<hr />
		<table id="dg"></table>
	</body>

</html>